import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { Card, Tooltip } from 'antd';
import styles from './index.less';
import moment from 'moment';

import {
  Const
} from '../../Const';

class PrivateData {
  static lvkeArr = [
    { text: '旅客姓名(NM)', value: 'paxName' },
    { text: '旅客姓名缩写', value: 'paxInitials' },
    { text: '证件类型', value: 'idType', isMap: 'idTypeMap' },
    { text: '证件号', value: 'idNo' },
    { text: '客票号(TK)', value: 'tktNo' },
    { text: '舱位(L)', value: 'cabin' },
  ];
  static hangbanArr = [
    { text: '航班号(L)', value: 'flightNo' },
    { text: '始发地', value: 'org' },
    { text: '旅客航程(RT)', value: 'segment' },
    { text: '航班日期(FD)', value: 'flightDate' },
    { text: '目的地', value: 'dst' },
    { text: '飞机型号', value: 'acType' },
    { text: '飞机号', value: 'planeCode' },
  ];
  static xingliArr = [
    { text: '行李总件数', value: 'pkgCount' },
    { text: '行李总重量(BW)', value: 'pkgWeight' },
    { text: '发生事故行李件数', value: 'accidentPkgCount' },
  ];
  static xingliYiChangArr = [
    { text: '行李牌号(TN)', value: 'pkgNo' },
    { text: '行李重量(NW)', value: 'pkgWeight' },
    { text: '行李航程(CT)', value: 'pkgSegment' },
    { text: '行李颜色(CT)', value: 'pkgColor' },
    { text: '行李类型(CT)', value: 'pkgType' },
    { text: '行李描述', value: 'pkgContent' },
    { text: '行李备注', value: 'pkgRemark', isToolTip: true },
    { text: '逾重行李票号', value: 'overweightTktNo' },
    { text: '破损类型', value: 'damageType', isMap: 'damageTypeMap' },
    { text: '破损部位', value: 'damagePart', isMap: 'damagePartMap' },
    { text: '破损程度', value: 'damageLevel', isMap: 'damageLevelMap' },
    { text: '缺失物品描述', value: 'lossItemsContent' },
  ];
  static buchongArr = [
    { text: '联系方式1', value: 'recipientPhoneFirst' },
    { text: '联系方式2', value: 'recipientPhoneSecond' },
    { text: '收件人姓名', value: 'expressRecipient' },
    { text: '收件地址', value: 'recipientAddress' },
    { text: '服务航站', value: 'serviceCity' },
    { text: '', value: '' },
    { text: '少收类型', value: 'littlePkgType', isMap: 'littlePkgTypeMap' },
    { text: '事故提醒', value: 'remindDay', unit: '天(自然日)' },
    { text: '', value: '' },
  ];
  static qitaArr = [
    { text: '录入人', value: 'createId' },
    { text: '录入时间', value: 'createTime' },
    { text: '录入航站', value: 'enterTerminal' },
    { text: '录入航站联系电话', value: 'enterTerminalPhone' },
    { text: '赔偿总费用', value: 'payMoney' },
    { text: '快递总费用', value: 'transportPay' },
    { text: '事故原因', value: 'accidentReason', isMap: 'accidentReasonMap' },
  ];
}

const InfoBox = props => {

  const { detailInfo, ownerType } = props;

  const dealDetailInfo = useCallback((item) => {
    if (item.isMap) {
      return Const[item.isMap][detailInfo[item.value]]?.text || '';
    } else {
      return (detailInfo[item.value] || '') + (item.unit || '');
    }
  }, [detailInfo]);

  const dealXingLiList = useCallback((data, item) => {
    if (item.isMap) {
      if (item.value === 'damageType' || item.value === 'damagePart') {
        let arr = (data[item.value] ? data[item.value].split(',') : []) || [];
        let arrName = [];
        for (let i of arr) {
          arrName.push(Const[item.isMap][i]?.text || '');
        }
        return arrName.join(',');
      } else {
        return Const[item.isMap][data[item.value]]?.text || '';
      }
    } else {
      return (data[item.value] || '') + (item.unit || '');
    }
  }, []);

  const ItemBoxDom = useCallback(props => {
    const { item } = props;
    return <div>{item.text ? item.text  + '：' : ''}{dealDetailInfo(item)}</div>
  }, [detailInfo]);

  const XingLiItemDom = useCallback(props => {
    const { item, data } = props;
    if (item.isToolTip) {
      let str = dealXingLiList(data, item);
      return (
        <Tooltip title={str}>
          <div>{item.text ? item.text  + '：' : ''}{str}</div>
        </Tooltip>
      )
    } else {
      return <div>{item.text ? item.text  + '：' : ''}{dealXingLiList(data, item)}</div>
    }
  }, []);

  return (
    <div className={styles.infoBox}>
      <Card title="旅客信息">
        <div className={styles.itemBox}>
          {PrivateData.lvkeArr.map((item, index) => (
            <ItemBoxDom key={index} item={item}></ItemBoxDom>
          ))}
        </div>
      </Card>
      <Card title="航班信息">
        <div className={styles.itemBox}>
          {PrivateData.hangbanArr.map((item, index) => (
            <ItemBoxDom key={index} item={item}></ItemBoxDom>
          ))}
        </div>
      </Card>
      <Card title="行李信息">
        <div className={styles.itemBox}>
          {PrivateData.xingliArr.map((item, index) => (
            <ItemBoxDom key={index} item={item}></ItemBoxDom>
          ))}
        </div>
      </Card>
      {(detailInfo.pkgDetailInfoList || []).map((item, index) => (
        <Card key={index}>
          <div className={styles.itemBox}>
            {PrivateData.xingliYiChangArr.map((m, n) => {
              if (+ownerType === 1 || +ownerType === 7) {
                if (m.value !== 'lossItemsContent') {
                  return <XingLiItemDom key={n} item={m} data={item}></XingLiItemDom>;
                }
              } else if (+ownerType === 6) {
                let arr = ['damageType', 'damagePart', 'damageLevel'];
                if (arr.indexOf(m.value) === -1) {
                  return <XingLiItemDom key={n} item={m} data={item}></XingLiItemDom>;
                }
              } else {
                let arr = ['damageType', 'damagePart', 'damageLevel', 'lossItemsContent'];
                if (arr.indexOf(m.value) === -1) {
                  return <XingLiItemDom key={n} item={m} data={item}></XingLiItemDom>;
                }
              }
            })}
          </div>
        </Card>
      ))}
      <Card title="补充信息">
        <div className={styles.itemBox}>
          {PrivateData.buchongArr.map((item, index) => {
            if (+ownerType === 1 || +ownerType === 7) {
              if (!(index === 6 || index === 7 || index === 8)) {
                return <ItemBoxDom key={index} item={item}></ItemBoxDom>
              }
            } else {
              return <ItemBoxDom key={index} item={item}></ItemBoxDom>
            }
          })}
        </div>
      </Card>
      <Card title="其他信息">
        <div className={styles.itemBox}>
          {PrivateData.qitaArr.map((item, index) => (
            <ItemBoxDom key={index} item={item}></ItemBoxDom>
          ))}
        </div>
      </Card>
    </div>
  )
};

export default InfoBox;
